import React from 'react'
import Title from '../../components/title'
import { EnvironmentOutline, SearchOutline, DownOutline } from 'antd-mobile-icons'
import './home.scss'
import { useSelector, useDispatch } from 'react-redux'
import { changeCity } from '../../store/modules/city'
import MySwiper from '../Swiper/MySwiper'
function Home() {
    const city = useSelector((state: string) => state.city.city)
    const dispatch = useDispatch()
    return (
        <div className='box'>
            {/* 标题部分 */}
            <div>
                <Title></Title>
            </div>
            {/* 城市展示 */}
            <div className='city'>
                <span><EnvironmentOutline />{city}<DownOutline /></span>
                <span className='search'><SearchOutline />搜索景区</span>
                <span className='search-size'>搜索</span>
            </div>
            <div className='hotcity-list'>
                <span onClick={() => dispatch(changeCity('北京'))}>北京</span>
                <span onClick={() => dispatch(changeCity('上海'))}>上海</span>
                <span onClick={() => dispatch(changeCity('深圳'))}>深圳</span>
                <span onClick={() => dispatch(changeCity('广州'))}>广州</span>
                <span onClick={() => dispatch(changeCity('珠海'))}>珠海</span>
                <span onClick={() => dispatch(changeCity('佛山'))}>佛山</span>
                <span onClick={() => dispatch(changeCity('苏州'))}>苏州</span>
                <span onClick={() => dispatch(changeCity('扬州'))}>扬州</span>
                <span onClick={() => dispatch(changeCity('武汉'))}>武汉</span>
                <span onClick={() => dispatch(changeCity('长沙'))}>长沙</span>
                <span onClick={() => dispatch(changeCity('合肥'))}>合肥</span>
                <span onClick={() => dispatch(changeCity('沈阳'))}>沈阳</span>
            </div>
            {/* 轮播图 */}
            <div>
                <MySwiper></MySwiper>
            </div>
        </div>
    )
}

export default Home
